<template>
    <div class="container">
           <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>头条上传</el-breadcrumb-item>
            <el-breadcrumb-item>
                <span class="u-cursor" @click="$router.back()">头条账号管理</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>设置预警方式</el-breadcrumb-item>
        </el-breadcrumb>
        <Container>
             <!--标题 -->
            <ContainerTitle>设置预警方式</ContainerTitle>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="early-demo-ruleForm">
                <el-form-item label="设置预警方式【默认】">
                     钉钉推送
                </el-form-item>
                 <el-form-item label="钉钉群来源">
                    <el-radio-group v-model="ruleForm.isToChoose">
                        <el-radio label="0">已有钉钉群</el-radio>
                        <el-radio label="1">新增钉钉群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="钉钉群名称" v-if="ruleForm.isToChoose==0">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div v-else>
                   <el-form-item label="钉钉群名称"  prop="dingName">
                       <el-input v-model="ruleForm.dingName" ></el-input>
                   </el-form-item>
                    <el-form-item label="钉钉群链接" prop="url">
                       <el-input type="textarea" placeholder="请输入链接" v-model="ruleForm.url"></el-input>
                   </el-form-item>
                    <el-form-item >
                       【获取群链接示例】
                   </el-form-item>
                   <el-form-item >
                       <img src="../../assets/img/yanshi.jpg" alt="">
                   </el-form-item>
                </div>



                
            </el-form>

        </Container>
            <Affix :offset-bottom="0">
            <ButtonGroup isFixed align="right">
                <el-button size="small" @click="$router.back()">返回</el-button>
                <el-button size="small" type="primary" @click="handleEnsure"
                >确定</el-button
                >
            </ButtonGroup>
            </Affix>
     
        
    </div>
</template>
<script>

import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";

export default {
components: {
    Container,
    CustomTableColumn,
    ContainerTitle,
    ButtonGroup,
    Affix
  },
  data(){
      return {
          ruleForm:{
             isToChoose: "0",
             dingName:"",
             url:""
          },
          rules:{
              dingName: [
                    { required: true, message: '请输入钉钉群名称', trigger: 'blur' },
              ],
              url: [
                  { required: true, message: '请输入钉钉网址', trigger: 'blur' },
              ]
          },
           options: [],
            value: '',
            ids:null
      }
  },
  created(){
      this.getDing();
      this.ids = this.$route.query.ids;
  },
  methods:{
      handleEnsure() {
         this.createDetail();
         this.$router.go(-1);
      },
      createDetail(){
           var parmas ={}
           if(this.ruleForm.isToChoose=="0"){
               parmas={
                   accountIds:this.ids,
                    general:1,
                    dingId:this.value,
                    isToChoose :this.ruleForm.isToChoose
               }
           }else{
               parmas={
                    accountIds:this.ids,
                    general:1,
                    isToChoose :this.ruleForm.isToChoose,
                    dingName : this.ruleForm.dingName,
                    url:this.ruleForm.url
               }
           }
            this.$http({
                    method: "post",
                    url: "/marketing_tt/api/task_tt_general/set_ding_id",
                    data:parmas
                }).then(res => {  
                  
                    if(res.data.code=="1"){
                        this.$message.success(res.data.data);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
      },
      getDing(){
          this.$http({
            method: "get",
            url: "/marketing_tt/api/task_tt_general/get_ding_list",
        }).then(res => {  
            console.log(res.data.data);
            this.options=res.data.data;
        });
      }
  }
}
</script>
<style >
.early-demo-ruleForm{
    margin-left: 50px;
}

.early-demo-ruleForm .el-form-item__label{
    width: 200px !important;
}
.early-demo-ruleForm .el-form-item__content{
    margin-left: 300px !important;
}
</style>